<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-14 22:17:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 16:25:01
-->
<template>
  <div class="engineerDetail">
    <el-page-header @back="goBack" content="工程详情"></el-page-header>
      <div class="engineerInfo">
        <div class="engineer_header">工程信息</div>
        <div class="engineer_content">
          <el-form label-width="150px" >
            <el-row>
              <el-col :span="12" >
                <el-form-item label="工程编号:" width="150px">
                  {{ engineer.serial_number }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程类型:" >
                  {{ engineer.type }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程状态:" >
                <el-tag type="success">{{engineer.status}}</el-tag>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                <el-form-item label="工程名称:">
                  {{ engineer.name }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
               <el-form-item label="工程地址:">
                  {{ engineer.address }}
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
               <el-col :span="12">
               <el-form-item label="开始时间:">
                  {{ engineer.begin_time }}
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="结束时间:" >
                  {{ engineer.end_time }}
               </el-form-item>
             </el-col>
           </el-row>
            <el-row>
             <el-col :span="12">
               <el-form-item label="区域经理:" >
                 {{ engineer.charge_name }}
               </el-form-item>
             </el-col>
            <el-col :span="12">
              <el-form-item label="工程经度:">
                 {{ engineer.latitude }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程经度:">
                 {{ engineer.longitude }}
              </el-form-item>
            </el-col>
           </el-row>    
          </el-form>
        </div>
      </div>
      <div class="devices">
        <div class="engineer_header">已绑定设备信息
          <el-button type="primary" style="float:right; margin:5px 5px 0 0" size="small" @click="toBindHandler">绑定</el-button>
        </div>
        <div class="deviceList">
             <el-table size="small" :data="devices" style="width:100%" >
             <el-table-column  label="序号" width="60px" type="index" align="center" fixed></el-table-column>
             <el-table-column prop="serial_number" label="设备编号" width="160px" align="center" fixed></el-table-column>
             <el-table-column prop="name" label="设备名称" width="160px" align="center" fixed></el-table-column>
             <el-table-column prop="bind_status" label="绑定状态" width="130px" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.bind_status == 1" type="success" size="mini">绑定</el-tag>
              <el-tag v-else type="danger" size="mini">未绑定</el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="online_status" label="在线状态" width="80px" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.online_status == 1" type="success" size="mini">在线</el-tag>
              <el-tag v-else type="danger" size="mini">离线</el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="latitude" label="经度" width="150px" align="center" >
            <template v-slot="scope">
              <el-tag v-if="scope.row.latitude == null" type="info" size="mini">暂未绑定</el-tag>
              <span v-else>{{scope.row.latitude}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="longitude" label="维度" width="150px" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.longitude == null" type="info" size="mini">暂未绑定</el-tag>
              <span>{{scope.row.longitude}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="video" label="视频" width="100px" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.video == null" type="info" size="mini">暂未开通</el-tag>
              <span>{{scope.row.video}}</span>    
            </template>
            </el-table-column>
            <el-table-column label="操作"  align="center" fixed="right" width="120px">
            <template v-slot="{row}">
              <el-button  v-if="row.online_status == 0" type="text" size="small" @click="toOpenHandler(row.id, $event)">开启</el-button>
              <el-button v-else type="text" size="small" @click="toOpenHandler(row.id, $event)">关闭</el-button>
              <el-button  type="text" size="small" style="color: red"  @click="toUnBindHandler(row.id)">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
        </div>
      </div>
      <!-- 绑定模态框 -->
    <el-dialog
      @close="dialogCloseHandler"
      title="绑定设备"
      :visible.sync="visible"
    >
      <el-form :model="form" :rules="rules" ref="deviceForm">
        <el-form-item
          prop="device_id"
          label="设备"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.device_id">
            <el-option
              v-for="(item, index) in unbindDevices"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="longitude"
          label="安装经度"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.longitude"></el-input>
        </el-form-item>
        <el-form-item
          prop="latitude"
          label="安装纬度"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.latitude"></el-input>
        </el-form-item>
        <el-form-item label="视频流" :label-width="formLabelWidth">
          <el-input v-model="form.video"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmitHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get } from '@/utils/request.js';
export default {
  data() {
    return{
      engineer:{},
      devices:[],
      visible: false,
      form: {},
      rules: {
        device_id: [
          { required: true, message: "请选择设备", trigger: "change" },
        ],
        longitude: [
          { required: true, message: "请输入安装经度", trigger: "blur" },
        ],
        latitude: [
          { required: true, message: "请输入安装纬度", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      unbindDevices: [],
    };
  },
  methods: {
    //返回事件
    goBack () {
      this.$router.go(-1);
    }, 
    //查询该工程下已绑定的设备
    findDevicesByEngineer(){
      get("/device/pageQuery",{
        page:1,
        pageSize:100,
        engineer_id: this.engineer.id,
      }).then((res)=>{
        this.devices=res.data.list;
      });
    },
    // 查询所有未绑定的设备
    findAllUnBindDevices() {
        get("/device/pageQuery", {
        page: 1,
        pageSize: 100,
        bind_status: 0,
      }).then((res) => {
        this.unbindDevices = res.data.list;
      });
    },
    //设备解绑
    toUnBindHandler(id) {
      this.$confirm("此操作将解绑该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        get("/engineer/unbindDevice", {
          engineer_id: this.engineer.id,
          device_id: id,
        }).then((res) => {
          // 重载数据
          this.findDevicesByEngineer();
          // 提示成功
          this.$message.success("解绑成功");
        });
      });
    },
    //设备开启或关闭
    toOpenHandler(id,event) {
      if(event.target.innerText == "开启") {
          this.$confirm("此操作将开启该设备,并产生实时数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          get("/device/openDevice", { id }).then((res) => {
            // 重载数据
            this.findDevicesByEngineer();
            // 提示成功
            this.$message.success("开启成功");
          });
        });
      } else {
        this.$confirm("此操作将关闭该设备,并停止采集数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          get("/device/closeDevice", { id }).then((res) => {
            // 重载数据
            this.findDevicesByEngineer();
            // 提示成功
            this.$message.success("关闭成功");
          });
        });
      }
    },
    //模态框关闭回调
    dialogCloseHandler() {
      this.$refs['deviceForm'].resetFields();
    },
    //绑定按钮点击事件
    toBindHandler(){
        this.form = {};
        this.visible = true;
    },
    // 绑定表单确认按钮提交事件
    toSubmitHandler() {
        const params = {
        ...this.form,
        engineer_id: this.engineer.id,
      };
      get("/engineer/bindService", params).then((res) => {
        // 重载设备信息数据
        this.findDevicesByEngineer();
        // 提示成功
        this.$message.success("绑定成功");
        // 关闭模态框
        this.visible = false;
      });
    }
  },
   created() {
     this.engineer = this.$route.query;
     //调用查询设备的方法
     this.findDevicesByEngineer();
      // 查询所有未绑定的设备
     this.findAllUnBindDevices();
 }
}
</script>

<style scoped>
.engineerInfo{
  padding:1em;
}
.engineer_header{
  height: 42px;
  line-height: 42px;
  background-color: #ededed;
  color: rgb(100, 99, 99);
  font-size: 18px;
  border-radius: 3px;
  padding-left: 1em;
}
</style>